<!--
 * @Description: 标题栏
 * @Author: DHL
 * @Date: 2022-10-21 08:47:34
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-11 10:56:40
-->
<template>
  <div class="tw-section-wrapper">
    <div class="tw-section-header" @click="handleClick">
      <div
        v-if="type"
        class="tw-section-header__decoration"
        :class="type"
        :style="{ 'background-color': typeColor }"
      />
      <slot v-else name="decoration" />

      <div class="tw-section-header__content">
        <div>
          <span
            :style="{ 'font-size': titleFontSize, color: titleColor }"
            class="tw-section__content-title"
            :class="{ distraction: !subTitle }"
          >
            {{ title }}
          </span>
          <span
            v-if="subTitle"
            :style="{ 'font-size': subTitleFontSize, color: subTitleColor }"
            class="tw-section-header__content-sub"
          >
            {{ subTitle }}
          </span>
        </div>
      </div>

      <div class="tw-section-header__slot-right"><slot name="right" /></div>
    </div>

    <div class="tw-section-content" :style="{ padding: _padding }"><slot /></div>
  </div>
</template>

<script setup lang="ts">
  /**
   * Section 标题栏
   * @description 标题栏
   * @property {String} type = [line|circle|square] 标题装饰类型
   * 	@value line 竖线
   * 	@value circle 圆形
   * 	@value square 正方形
   * @property {String} title 主标题
   * @property {String} titleFontSize 主标题字体大小
   * @property {String} titleColor 主标题字体颜色
   * @property {String} subTitle 副标题
   * @property {String} subTitleFontSize 副标题字体大小
   * @property {String} subTitleColor 副标题字体颜色
   * @property {String} padding 默认插槽 padding
   */

  interface Props {
    /**
     * 标题装饰类型[line|circle]
     */
    type?: string

    /**
     * 标题装饰类型颜色
     */
    typeColor?: string

    /**
     * 主标题
     */
    title?: string

    /**
     * 主标题字体大小
     */
    titleFontSize?: string

    /**
     * 主标题字体颜色
     */
    titleColor?: string

    /**
     * 副标题
     */
    subTitle?: string

    /**
     * 副标题字体大小
     */
    subTitleFontSize?: string

    /**
     * 副标题字体颜色
     */
    subTitleColor?: string

    /**
     * 默认插槽 padding
     */
    padding?: boolean | string
  }

  const props = withDefaults(defineProps<Props>(), {
    type: 'line',
    typeColor: '#2979ff',
    title: '',
    titleFontSize: '14px',
    titleColor: '#333',
    subTitle: '',
    subTitleFontSize: '12px',
    subTitleColor: '#999',
    padding: false
  })

  /**
   * 插槽集合
   */
  const slots = useSlots()

  /**
   * 是否显示标题插槽
   */
  const showTitleSlot = computed(() => {
    const slotKeys = Object.keys(slots)
    return slotKeys.includes('title')
  })

  const emits = defineEmits(['click'])

  const _padding = computed(() => {
    if (typeof props.padding === 'string') {
      return props.padding
    }

    return props.padding ? '10px' : ''
  })

  function handleClick() {
    emits('click')
  }
</script>
